<template>
  <div class="nearby">
    <h3 class="nearby__title">附近店铺</h3>
    <router-link :to="`/shop/${item._id}`" v-for="item in nearbyList" :key="item._id">
      <ShopInfo :item="item"/>
    </router-link>
  </div>
</template>

<script>
import {ref} from 'vue';
import {get} from '../../utils/request';
import ShopInfo from '../../components/ShopInfo.vue';

const useNearbyList = () => {
  const nearbyList = ref([]);
  const getNearbyList = async() => {
    const result = await get('/api/shop/hot-list');
    if (result?.errno === 0 && result?.data?.length) {
      nearbyList.value = result.data;
      // console.log(result);
    }
  }
  return {getNearbyList, nearbyList}
}

export default {
  name: "Nearby",
  components: { ShopInfo },
  setup() {
    const {getNearbyList, nearbyList} = useNearbyList();
    getNearbyList();
    return {nearbyList};
  },
};
</script>

<style lang="scss" scoped>
@import "../../style/viriables";
.nearby {
  a {
    text-decoration: none;
    color: inherit;
  }
  &__title {
    margin: 0.16rem 0 0.02rem;
    font-size: 0.18rem;
    font-weight: normal;
    color: $content-fontcolor;
  }
}
</style>
